import styled from "styled-components"
// import "@/core/global"
// var r=global.$global.r
import { r } from "@/core/global"

const TopContent = styled.div`
    margin:${r(15)} ${r(15)};
    .classify{
        margin-top:15px;
        width:100%;
        overflow:hidden;
        ul{
            display:flex;
            justify-content:space-around;
            align-items:center;
        padding-bottom:30px;

            li{
                height:75px;
                width:r(50);
                text-align:center;

            a{
                display:inset-block;
                img{
                width:100%;
                height:auto;
            }
            }
        }
        }
    }
    .adv1{
        width: 100%;
        height:100px;
        overflow:hidden;
        img{
            width:100%;
            height:auto;
        }
    }
    .firstLine{
            height:90px;
            margin-top:40px;
            display:flex;
        justify-content:center;
        align-items:center;
            li+li{
            margin:0 4px;
      
        }

        li{
            flex:1;
            box-shadow:0px 0px 1px 4px #c3c3c3;
            height:100%;
            display:flex;
        justify-content:space-around;
        align-items:center;
            .titleWord{
                float: left;
                p{  
                text-align:center;
                width: 90px;
                height:20px;
                font-size:14px;
                font-weight:600;
                &:last-child{
                    color:666;
                    font-size:12px;
                font-weight:400;
                span{
                    color:red;
                }
                text-align:left;

                }
                line-height:20px;
            }

            }
            img{
                width: 42px;height:auto;
            }
        }
    }
    .secondLine{
        height:106px;
        display:flex;
        justify-content:center;
        align-items:center;
        li+li{
            margin:0 4px;
        }
        li{
            flex:1;
            box-shadow:0px 0px 1px 4px #c3c3c3;
            height:100%;
            display:flex;
            flex-direction:column;
        justify-content:center;
        align-items:center;
            .titleWord{
                p{  
                text-align:center;
                width: 108px;
                height:20px;
                font-size:14px;
                font-weight:600;
                &:last-child{
                    color:666;
                    font-size:12px;
                font-weight:400;
                span{
                    color:red;
                }
                text-align:left;

                }
                line-height:20px;
            }

            }
            
            img{
                width: 42px;height:auto;
            }
        }
    }


   
`;
const CityWrap = styled.div`

    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
   background-color: #666;
   z-index:1000;
   display:flex;
   .left{
       width:300px;
       height:100%;
       background:aqua;
        overflow: scroll;
        .citys{
                height:20px;
            font-size:16px;
            }   
      
   }
   .right{
       flex:1;
       height:100%;

       background-color:red;
   }

`

const SwiperWrap = styled.div`
width:100%;
height:${props => {
        return props.height ? props.height : "160px"
    }};
padding-left:15px;
box-sizing:border-box;
p{
    text-align:left;
    font-size:16px;
    height:60px;
    line-height:50px;
    font-weight:600;
    
}
.title_program{
        font-size:24px;

    }
.swiper-slide{
    margin-right:10px;
    width: 106px;
    height:100%;
}
.swiper-container {
    z-index:0;
    
    .swiper-wrapper{
    z-index:0;
}

}

`



const Hotsr = styled.div`

.title_program{
padding-left:15px;

    text-align:left;
    font-size:16px;
    height:50px;
    line-height:50px;
    font-weight:600;
        font-size:24px;
    }


`;
const TourStyle = styled.div`
width:100%;
overflow:hidden;
box-sizing:border-box;
padding: 15px;
p{
    text-align:left;
    font-size:16px;
    height:50px;
    line-height:50px;
    font-weight:600;
}
.title_program{
        font-size:24px;
    }
    .space-carousel {

  background: #DEF1E5;
  overflow: hidden;
}
`
const TopBtn = styled.div`
height:50px;
width:100%;
        overflow:hidden;
        position:fixed;
    top:0;
     left:0; 
     z-index:1000;

   .btn_search{
    position:absolute;
    height:50px;
    top:0;
     left:0;
width:100%;
   }
`;
const FloorShowStyle = styled.div`
    font-family:Avenir,Helvetica,Arial,sans-serif;

    .title_h1{
    padding-left:${r(16)};
    font-size:${r(24)};
    font-weight:600;
    text-align:left;
   
    }
    .first_show{
    margin-bottom:${r(20)};
    padding-left:${r(16)};
    background-color: rgb(138, 124, 149);
    width: "100%";height:${r(214)};
    margin-top:${r(30)};
    display:flex;
    justify-content:center;
    align-items:center;
    .first_show_img{
        width:${r(130)};
        height:${r(160)};
    }
    .first_show_introduce{
        width:${r(235)};
        height:${r(160)};
        color:#fefefe;
        text-align:left;
        display:flex;
        flex-direction:column;
        justify-content:space-around;
        p{
            font-size:${r(18)};
            padding-top:${r(10)};
            line-height:${r(20)};
            .show_time{
                font-size:${r(16)};
            }
            span{
                font-size:${r(12)};
                display:inline-block;
                height:${r(20)};
                line-height:${r(20)};
                padding:0 ${r(5)};
            }
        }
    }
 };

`;

export {
    CityWrap,
    TopContent,
    SwiperWrap,
    TourStyle,
    TopBtn,
    Hotsr,
    FloorShowStyle
}